<!-- city组件 -->
<template>
   <div class='component_wrapper'>
       <!-- <div class="lable_title" :style="label_width">
           <i class="iconfont iconbitian" v-if="is_required"></i>
           {{title}}：
       </div> -->
        <el-cascader
            clearable
            ref="cascader_ref"
            v-model="input_val"
            :options="optionList"
            @change="value_change"
            :style="input_width"
            size="mini"
            class="_cascader_city"
        ></el-cascader>
   </div>
</template>

<script>
import china_map from '../../api/city/city.json';

export default {
    name: 'city', 
    props: {
        info: {
            type: Object,
        },
        common_label_width: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            input_val: [],
            is_required: false,
            input_width: '',
            label_width: '',
            key: '',
            title: '',
        };
    },
    watch: {
        info:{
            handler(newInfo, oldInfo){
                this.input_val = newInfo.default_value;
            },
            deep: true
        }
    },
    computed: {
        optionList(){
            return china_map || [];
        }
    },
    methods: {
        value_change(val){
            
            if (val.length>0) {
                let { pathNodes } = this.$refs.cascader_ref.getCheckedNodes(true)[0];
                console.log(pathNodes);
                if(pathNodes){
                    let message = pathNodes.reduce(function(init, item, index){
                        if(index === 0) { // 省
                            // init.provCode = item.data.code;
                            init.provName = item.data.label
                        } else if(index === 1) { // 市
                            // init.cityCode = item.data.code;
                            init.cityName = item.data.label
                        } else if(index === 2) { // 区/县
                            // init.counCode = item.data.code;
                            init.counName = item.data.label
                        };
                        return init;
                    }, {});
                   //  this.$emit("change_value", {
                   //      type: 'city',
                   //      key: this.key,
                   //      show_key: '',
                   //      data: message,
                   //      val: val,
                   //  })
                };
            }

        }
    },
    mounted() {
        
    },
    created() {
        if(this.info){
            let {is_required = false, default_value = [], title = '', key, width = '', label_width = ''} = this.info;
            this.is_required = is_required;
            this.input_val = default_value;
            this.title = title;
            this.key = key;
            this.input_width = `width: ${width}` || '';
            this.label_width = label_width ? `width: ${label_width}` : '';
        };
        if(this.common_label_width){
            this.label_width = `width: ${this.common_label_width}`;
        };
    },
}
</script>

<style lang='less'>


</style>